<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JCP人事管理系统</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="backstageCSSandJS/css/font.css">
<link rel="stylesheet" href="backstageCSSandJS/css/xadmin.css">
<link rel="stylesheet"
	href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.min.css">
<script type="text/javascript"
	src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script src="backstageCSSandJS/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="backstageCSSandJS/js/xadmin.js"></script>

</head>
<body>
	<!-- 顶部开始 -->
	<div class="container">
		<div class="logo">
			<a href="ns.do?op1=zhexiandenglu">JCP人事管理系统</a>
		</div>
		<div class="open-nav">
			<i class="iconfont">&#xe699;</i>
		</div>
		<ul class="layui-nav right" lay-filter="">
			<li class="layui-nav-item"><a href="javascript:;">admin</a>
				<dl class="layui-nav-child">
					<!-- 二级菜单 -->
					<dd><a href="login.jsp">切换帐号</a></dd>
              		<dd><a href="login.jsp">退出</a></dd>
				</dl></li>
			
		</ul>
	</div>
	<!-- 顶部结束 -->
	<!-- 中部开始 -->
	<div class="wrapper">
		<!-- 左侧菜单开始 -->
		<div class="left-nav">
			<div id="side-nav">
				<ul id="nav">
					<li class="list" current><a href="javascript:;"> <i
							class="iconfont">&#xe761;</i> 公告管理 <i class="iconfont nav_right">&#xe697;</i>
					</a>
						<ul class="sub-menu">
							<li><a href="ns.do?op1=login"> <i class="iconfont">&#xe6a7;</i>
									公告列表
							</a></li>
						</ul>
					<li class="list"><a href="javascript:;"> <i
							class="iconfont">&#xe70b;</i> 员工管理 <i class="iconfont nav_right">&#xe697;</i>
					</a>
						<ul class="sub-menu">
							<li><a href="ns.do?op1=Usersel"> <i class="iconfont">&#xe6a7;</i>
									员工列表
							</a></li>
						</ul></li>
					<li class="list"><a href="javascript:;"> <i
							class="iconfont">&#xe6a3;</i> 岗位管理 <i class="iconfont nav_right">&#xe697;</i>
					</a>
						<ul class="sub-menu">
							<li><a href="ns.do?op1=postSel"> <i class="iconfont">&#xe6a7;</i>
									岗位列表
							</a></li>
						</ul></li>
					<li class="list"><a href="javascript:;"> <i
							class="iconfont">&#xe6a3;</i> 部门管理 <i class="iconfont nav_right">&#xe697;</i>
					</a>
						<ul class="sub-menu" style="display: none">
							<li><a href="ns.do?op1=deptsel"> <i class="iconfont">&#xe6a7;</i>
									部门列表
							</a></li>
						</ul></li>
					<li class="list"><a href="javascript:;"> <i
							class="iconfont">&#xe6a3;</i> 档案管理 <i class="iconfont nav_right">&#xe697;</i>
					</a>
						<ul class="sub-menu" style="display: none">
							<!--  <li>
                            <a href="files_1.jsp">
                                <i class="iconfont">&#xe6a7;</i>
                          	      添加档案
                            </a>
                        </li> -->
							<li><a href="ns.do?op1=filesminsel"> <i class="iconfont">&#xe6a7;</i>
									查看档案
							</a></li>
						</ul></li>
					<li class="list"><a href="javascript:;"> <i
							class="iconfont">&#xe6a3;</i> 考勤管理 <i class="iconfont nav_right">&#xe697;</i>
					</a>
						<ul class="sub-menu" style="display: none">
							<li><a href="ns.do?op1=zhousel"> <i class="iconfont">&#xe6a7;</i>
									考勤统计图
							</a></li>
						</ul></li>
				</ul>
			</div>
		</div>
		<!-- 左侧菜单结束 -->
		<!-- 右侧主体开始 -->
		<div class="page-content">
			<div class="content">
				<!-- 右侧内容框架，更改从这里开始 -->
				<form class="layui-form xbs" action="ns.do?op1=Usersel"
					method="post">
					<div class="layui-form-pane" style="text-align: center;">
						<div class="layui-form-item" style="display: inline-block;">
							<div class="layui-input-inline">
								<input type="text" name="username" placeholder="请输入员工姓名"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-input-inline" style="width: 80px">
								<button class="layui-btn" lay-submit="" lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</div>
					</div>
				</form>
				<xblock>
				<button class="layui-btn"
					onclick="member_add('添加用户','Users_1-add.jsp','640','570')">
					<i class="layui-icon">&#xe608;</i>添加
				</button>
				<span class="x-right" style="line-height: 40px">共有数据：88 条</span></xblock>
				<table class="layui-table">
					<thead>
						<tr>

							<th>员工编号</th>
							<th>员工姓名</th>
							<th>性别</th>
							<th>手机</th>
							<th>邮箱</th>
							<th>地址</th>
							<th>身份证</th>
							<th>所属部门</th>

							<th>人脸识别</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						<c:if test="${requestScope.users!=null}">
							<c:forEach var="users" items="${requestScope.users}">
								<tr>

									<td>${users.userId}</td>
									<td>${users.userName}</td>
									<td>${users.sex}</td>
									<td>${users.phone}</td>
									<td>${users.userEmail}</td>
									<td>${users.address}</td>
									<td>${users.cardId}</td>
									<td>${users.deptName}</td>

									<td class="td-status">
										<button name="button01" class="btn" onclick="addface('addface.jsp?userId=${users.userId}')">添加人脸</button>
									</td>
									<td class="td-manage"><a style="text-decoration: none"
										onclick="member_password('编辑','Users_1-edit.jsp?userId=${users.userId}&userName=${users.userName}&sex=${users.sex}&phone=${users.phone}&userEmail=${users.userEmail}&address=${users.address}&cardId=${users.cardId}&deptName=${users.deptName}','10001','600','400')"
										href="javascript:;" title="编辑"> <i class="layui-icon">&#xe631;</i>
									</a> <a title="删除" href="javascript:;"
										onclick="member_del(this,'${users.cardId}')"
										style="text-decoration: none"> <i class="layui-icon">&#xe640;</i>
									</a></td>
								</tr>
							</c:forEach>
						</c:if>


					</tbody>
				</table>

				<!-- 右侧内容框架，更改从这里结束 -->
			</div>
		</div>
		<!-- 右侧主体结束 -->
	</div>
	<!-- 中部结束 -->
	<!-- 底部开始 -->
	<div class="footer">
		<div class="copyright">Copyright ©2019 人事管理系统 v3.3 All Rights
			Reserved. 本后台系统由JCP小队提供技术支持</div>
	</div>
	<!-- 底部结束 -->
	<!-- 背景切换开始 -->
	<div class="bg-changer">
		<div class="swiper-container changer-list">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/a.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/b.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/c.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/d.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/e.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/f.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/g.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/h.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/i.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/j.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<img class="item" src="backstageCSSandJS/images/k.jpg" alt="">
				</div>
				<div class="swiper-slide">
					<span class="reset">初始化</span>
				</div>
			</div>
		</div>
		<div class="bg-out"></div>
		<div id="changer-set">
			<i class="iconfont">&#xe696;</i>
		</div>
	</div>
	<!-- 背景切换结束 -->
	<!-- 页面动态效果 -->
	<script>
		/*用户-添加*/
		function member_add(title, url, w, h) {
			x_admin_show(title, url, w, h);
		}
		/*用户-查看*/
		function member_show(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}
		/*用户-启用*/
		function member_start(obj, id) {
			layer
					.confirm(
							'确认要启用吗？',
							function(index) {
								//发异步把用户状态进行更改
								$(obj)
										.parents("tr")
										.find(".td-manage")
										.prepend(
												'<a style="text-decoration:none" onClick="member_stop(this,id)" href="javascript:;" title="停用"><i class="layui-icon">&#xe601;</i></a>');
								$(obj)
										.parents("tr")
										.find(".td-status")
										.html(
												'<span class="layui-btn layui-btn-normal layui-btn-mini">已启用</span>');
								$(obj).remove();
								layer.msg('已启用!', {
									icon : 6,
									time : 1000
								});
							});
		}
		// 用户-编辑
		function member_edit(title, url, id, w, h) {
			x_admin_show(title, url, w, h);
		}
		/*密码-修改*/
		function member_password(title, url, id, w, h) {
			if (title == null || title == '') {
				title = false;
			}
			;
			if (url == null || url == '') {
				url = "404.html";
			}
			;
			if (w == null || w == '') {
				w = 800;
			}
			;
			if (h == null || h == '') {
				h = ($(window).height() - 50);
			}
			;
			layer.open({

				type : 2,
				area : [ w + 'px', h + 'px' ],
				fix : false, //不固定
				maxmin : true,
				shadeClose : true,
				shade : 0.4,
				title : title,
				content : url,
				anim : 5,
				success : function(data) {

					if (data == true) {
						parent.layer.closeAll();
						window.location.reload();
					}
				}
			});
		}
		/*用户-删除*/
		function member_del(obj, id) {
			layer.confirm('确认要删除吗？', function(index) {
				console.log(id);
				//发异步删除数据
				$.ajax({
					type : "post",
					url : "ns.do?op1=userDel&CardId=" + id,
					async : true,
					success : function(data) {
						layer.msg('已删除!', {
							icon : 1,
							time : 1000
						});
						$(obj).parents("tr").remove();
					}
				});
			});

		}

		//戴布斯：添加人脸添加的弹窗
		function addface(url) {
			//iframe窗
			layer.open({
				type : 2,
				title : "JCP人脸识别",
				closeBtn : 1, //不显示关闭按钮
				shade : [ 0 ],
				maxmin : true,
				area : [ '450px', '300px' ],
				offset : '100px', //右下角弹出
				time : 0, //2秒后自动关闭
				anim : 1,
				content : [ url, 'no' ], //iframe的url，no代表不显示滚动条
				end : function() { //此处用于演示
					/* layer.open({
						type : 2,
						title : '很多时候，我们想最大化看，比如像这个页面。',
						shadeClose : true,
						shade : false,
						maxmin : true, //开启最大化最小化按钮
						area : [ '893px', '600px' ],
						content : '//fly.layui.com/'
					}); */
				}
			});
		}
	</script>

</body>
</html>